package com.riaevolution.components {
	import mx.controls.Button;
	import mx.controls.LinkBar;
	import mx.core.IFlexDisplayObject;

	/**
	 *
	 * LinkButtonBar provide a way to move the label placement of buttons from the LinkBar containing it.
	 * This styles show you how can you achieve this functionality.
	 * Just change the stylename of an instance of <code>LinkButtonBar</code>.
	 *
	 * <listing>
	 * .LinkButtonBar {
	 *		linkButtonStyleName:UserBarLinksButtons;
	 *		label-placement:right;
	 *	}
	 *	.LinkButtonBarExpanded {
	 *		linkButtonStyleName:UserBarLinksButtonsExpanded;
	 *		label-placement:bottom;
	 *	}
	 *	.LinkButtonBarButtons {
	 *		color:#000000;
	 *		padding-top:2px;
	 *		font-size:10px;
	 *	}
	 *	.LinkButtonBarButtonsExpanded {
	 *		color:#FF3300;
	 *		font-size:12px;
	 *		padding-top:6px;
	 *	}
	 * </listing>
	 *
	 *
	 * <br /><b>Luciano bustos</b> <a href="mailto:luchyx&#64;riaevolution.com">luchyx&#64;riaevolution.com</a><br /><a href="http://www.riaevolution.com">www.riaevolution.com</a>
	 */
	public class LinkButtonBar extends LinkBar {

		public function LinkButtonBar() {
			super();
		}

		/**
		 * Function callback for each button created. this allows you to add listener or handle each button in an particular way.
		 * May contain the following signature.
		 * 
		 * <listing>
		 * function mybuttonfunc (button:Button, icon:Class, item:Object):void;
		 * </listing>
		 * 
		 */
		public var buttonFunction:Function;

		override protected function createNavItem(label:String, icon:Class = null):IFlexDisplayObject {
			var newLink:Button = super.createNavItem(label, icon) as Button;
			var labelPlacement:String = getStyle("labelPlacement");

			if (labelPlacement == null || labelPlacement == "") {
				labelPlacement = "right";
			}
			newLink.labelPlacement = labelPlacement;

			if (buttonFunction is Function) {
				buttonFunction(newLink, icon, dataProvider.getItemAt(this.numChildren - 1));
			}

			return newLink;
		}

		override public function styleChanged(styleProp:String):void {
			//esto previene el flickering!
			if (styleProp == null || styleProp == 'null')
				return;
			super.styleChanged(styleProp);
			var n:int = numChildren;

			for (var i:int = 0; i < n; i++) {
				if (styleProp == 'styleName') {
					Button(getChildAt(i)).styleName = getStyle("linkButtonStyleName");
				}
				Button(getChildAt(i)).labelPlacement = getStyle("labelPlacement");
			}
		}

		override protected function commitProperties():void {
			super.commitProperties();

			if (_iconFunctionChanged) {
				_iconFunctionChanged = false;
				redrawIcons();
			}
		}

		override public function set dataProvider(value:Object):void {
			super.dataProvider = value;
			_iconFunctionChanged = true;
		}

		private function redrawIcons():void {
			var n:int;
			var i:int;

			if (iconFunction != null && dataProvider) {
				n = numChildren;
				i = 0;

				for (i; i < n; i++) {
					Button(getChildAt(i)).setStyle("icon", iconFunction(dataProvider.getItemAt(i)));
				}
			} else if (dataProvider) {
				n = numChildren;
				i = 0;

				for (i; i < n; i++) {
					Button(getChildAt(i)).setStyle("icon", null);
				}
			}
		}


		private var _iconFunctionChanged:Boolean = false;

		private var _iconFunction:Function;

		/**
		 * The icon functions allow you to create an icon from outside the buttons bar.
		 * this function return a class and receive as parameter the current item.
		 * <listing>
		 * my_icon_function(item:Object):Class {
		 *  return iconsdictionary[item.iconName] as Class;
		 * }
		 * </listing>
		 *
		 * @return void
		 */

		public function set iconFunction(value:Function):void {
			_iconFunction = value;
			_iconFunctionChanged = true;
			invalidateProperties();
		}

		/**
		 * Return the current function that create icons
		 * @return Function
		 */

		public function get iconFunction():Function {
			return _iconFunction;

		}
	}
}